<template>
    <div>
        <p>{{zone}}</p>
        <section v-for="zone in zones[title]" class="col-xs-12 col-sm-6 col-md-3 portfolio-item-wrapper artwork creative">
            <div class="portfolio-item type2">
                <div class="portfolio-thumb">
                    <img :src="zone.src" class="img-responsive" alt="1st Portfolio Thumb">
                    <div class="image-overlay"></div>
                    <a href="/public/static/img/general/img1.jpg" data-rel="prettyPhoto[pp_gal]" class="portfolio-zoom"><i class="fa fa-eye"></i></a>
                    <a href="zones.html" class="portfolio-link"><i class="fa fa-link"></i></a>
                </div>
                <div class="portfolio-details">
                    <div class="portfolio-meta">
                        <span class="portfolio-date"><i class="fa fa-clock-o"></i> <a href="#">&nbsp; 21 August, 2020</a></span>
                        <span class="portfolio-likes"><i class="fa fa-heart-o"></i> <a href="#">&nbsp; 17</a></span>
                    </div>
                    <h5 class="portfolio-title"><a href="">Has labitur disputando at, enim.</a></h5>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
    export default {
        name: "zones",
        props: {
            title: String
        },
        data() {
            return {
                zones: {
                    ALL: [
                        {src: "static/img/general/img1.jpg"},
                        {src: "static/img/general/img2.jpg"},
                        {src: "static/img/general/img3.jpg"},
                        {src: "static/img/general/img4.jpg"}
                    ],
                    "生活": [
                        {src: "static/img/general/img5.jpg"},
                        {src: "static/img/general/img6.jpg"},
                        {src: "static/img/general/img7.jpg"},
                        {src: "static/img/general/img8.jpg"}
                    ],
                    "自然": [
                        {src: "static/img/general/img9.jpg"},
                        {src: "static/img/general/img10.jpg"},
                        {src: "static/img/general/img11.jpg"},
                        {src: "static/img/general/img12.jpg"}
                    ]
                }
            }
        }
    }
</script>